<script>
//外部链接组件工具栏
import { mapGetters } from 'vuex';
import * as types from '../../../store/types';
import DeleteCard from './DeleteCard.js';

export default {
  name: 'FrameToolbar',
  mixins: [DeleteCard],
  props: {
    //图表配置项ID
    chartId: {
      type: String,
      default: () => '',
    },
  },
  computed: {
    ...mapGetters(['controls', 'currentId']),
    control() {
      return this.controls[this.chartId];
    },
  },
  methods: {
    setUrl(e) {
      this.control.options.url = e.target.value;
      this.$store.commit(types.UPDATE_CHART_CONFIG, {
        data: { [this.currentId]: this.control },
      });
    },
    setTitle(e) {
      this.control.chartName = e.target.value;
      this.$store.commit(types.UPDATE_CHART_CONFIG, {
        data: { [this.currentId]: this.control },
      });
    },
  },
};
</script>
<template>
  <div class="frame-item-toolbar">
    <div>
      <Poptip
        placement="bottom"
        width="260">
        <Icon
          type="link"
          title="设置链接" />
        <div slot="content">
          <Input
            :value="control.options.url"
            size="small"
            placeholder="输入链接地址..."
            @on-blur="setUrl">
          </Input>
        </div>
      </Poptip>
      <Poptip
        placement="bottom"
        width="200">
        <Icon
          type="compose"
          title="设置标题" />
        <div slot="content">
          <Input
            :value="control.chartName"
            size="small"
            placeholder="输入链接标题..."
            @on-blur="setTitle"></Input>
        </div>
      </Poptip>
      <Icon
        type="android-expand"
        title="全屏" />
      <Icon
        type="close"
        title="删除"
        @click.native.stop="deleteCard" />
    </div>
  </div>
</template>

<style lang="less">
.frame-item-toolbar {
  position: absolute;
  top: 5px;
  right: 12px;
  z-index: 900;
  cursor: default;
  .k-icon {
    color: #666666;
    font-size: 18px;
    margin: 0 5px;
    cursor: pointer;
    &:hover {
      opacity: 0.8;
    }
  }
  .k-poptip-body-content {
    overflow-y: hidden;
  }
}
</style>
